<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li.active{
            background-color: #20FFFF;
        }
    </style>
</head>
<body>
    <div id="music">
        <!-- @end mp3播放完成之后会自动调用该方法 -->
        <audio :src="currentSong" controls autoplay @ended="nextHandler"></audio>
        <ul>
            <li v-for="(item, index) in musicData" :key="item.id" :class = '{active:currentIndex==index}' @click="songHandler(index)">
                <h2>歌手: {{ item.author }}</h2>
                <p>歌名: {{ item.name }}</p>
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        var musicData = [{
                id: 1,
                name: '于荣光 - 少林英雄',
                author: '于荣光',
                songSrc: './static/于荣光 - 少林英雄.mp3'
            },
            {
                id: 2,
                name: 'Joel Adams - Please Dont Go',
                author: 'Joel Adams',
                songSrc: './static/Joel Adams - Please Dont Go.mp3'
            },
            {
                id: 3,
                name: 'MKJ - Time',
                author: 'MKJ',
                songSrc: './static/MKJ - Time.mp3'
            },
            {
                id: 4,
                name: 'Russ - Psycho (Pt. 2)',
                author: 'Russ',
                songSrc: './static/Russ - Psycho (Pt. 2).mp3'
            }
        ];
        new Vue({
            el:'#music',
            data() {
                return {
                    musicData: [],
                    currentIndex: 0,
                }
            },
            created() {
                this.musicData = musicData
            },
            methods: {
                songHandler(index) {
                    console.log(index);
                    this.currentIndex = index;
                },
                nextHandler() {
                    if (this.currentIndex == this.musicData.length-1) {
                        this.currentIndex = 0;
                    } else {
                        this.currentIndex++;
                    }
                }
            },
            // 计算属性
            computed: {
                currentSong() {
                    return this.musicData[this.currentIndex].songSrc
                }
            }

        });
    </script>
</body>
</html>